<template>
  <div>
    <!-- 查询部分 -->
    <BaseCard>
      <BaseSearchForm ref="baseSearchFormRef" :searchConfig="searchConfig" @handleSearch="searchHook"
        @handleReset="searchHook">
        <el-button type="primary" plain :icon="Plus" @click="createHook">新增</el-button>
        <el-button type="danger" plain :icon="Minus" @click="batchDeleteHook">批量删除</el-button>
      </BaseSearchForm>
    </BaseCard>
    <!-- 新增修改部分 -->
    <BaseModalForm ref="baseModalFormRef" :modalFormConfig="modalFormConfig" :dialogConfig="dialogConfigRpe"
      :modalFormData="modalFormData" :showPagination="showModalFormFooter" @confirm="confirmHook">
    </BaseModalForm>
    <!-- 表格部分 -->
    <div class="-mt-20">
      <BasePageTable ref="basePageTableRef" :tableConfig="tableConfig" :storeName="storeName"
        @selectionChange="selectionChangeHook">
        <template #handle-table>
          <div class="table-header">结算列表</div>
        </template>
        <template #handle="scope">
          <div>
            <el-button type="primary" round size="small" @click="editHook(scope.row)"> 编辑 </el-button>
            <el-button type="danger" round size="small" @click="deleteHook(scope.row)"> 删除 </el-button>
          </div>
        </template>
      </BasePageTable>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { searchConfig } from "./config/search.config";
import { tableConfig } from "./config/table.config";
import { modalFormConfig, dialogConfig } from "./config/modal.config"
import { Plus, Refresh, Minus, Upload, Download } from "@element-plus/icons-vue";
import { mapShopType, mapShopStatus } from "@/utils/dictsMap";
import { useBaseSearchForm } from "@/old-hooks/use-base-search-form"
import { useBaseModalForm } from "@/old-hooks/use-base-modal-form";
import { useBasePageTable } from "@/old-hooks/use-base-page-table";
import { getItemByProp } from "@/utils/tools"
import { useStoreMgShopStore } from "@/store/storeMg/shop";

defineOptions({
  name: "Settlement"
});

// 映射pinia 名称
const storeName = "storeMgSettlementStore";

// pinia
const storeMgShopStore = useStoreMgShopStore()

// 查询表格表单dom
const baseSearchFormRef = ref()

// 页面表格dom
const basePageTableRef = ref();

// 弹框配置
const dialogConfigRpe = ref(dialogConfig)

// 表单弹框dom
const baseModalFormRef = ref()

// 表单弹框绑定数据
const modalFormData = ref({})

// 是否显示表单弹框底部操作按钮
const showModalFormFooter = ref(true)

// base-search-form 查询表格数据hook
const { searchHook } = useBaseSearchForm(basePageTableRef)

// base-modal-form 操作后的callback
const modalCallBack = (name, row) => {
  if (name == "create") {
    dialogConfigRpe.value.title = "新增"
  }
  if (name == "edit") {
    dialogConfigRpe.value.title = "编辑"
  }
}

// base-modal-form 新增/修改/详情 表格数据 hook
const { createHook, editHook, confirmHook } = useBaseModalForm(storeName, baseModalFormRef, basePageTableRef, modalFormData, modalFormConfig, modalCallBack)

// base-page-table 删除/批量删除 多选 导入 导出 hook
const { selectionChangeHook, batchDeleteHook, deleteHook } = useBasePageTable(storeName, basePageTableRef)

</script>
<style scoped lang="less">
.table-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tb-box,
.left-box {
  display: flex;
  align-items: center;
}

.label {
  margin-right: 20px;
}

.item {
  font-size: 12px;
  margin-left: 40px;
}
</style>